import {replaceByObj} from './xUtil.js';

/*
*   {style, noticeInterval,recieveInterval,duration,recieve,showType}
*   data Item: {type,theTime,code,name,link}
*   showType : top | bottom
*   type:warn|error|success|info
*   event:{OnNotice,OnClose}
*/
const tmplType  ={warn:'icon-warn', error:'icon-error',
                   success:'icon-success',info:'icon-info',
                   close:'icon-close'}

const tmplNoticeItem =
      `<div class="{{style}}" data-code="{{code}}" type="notify-item" style="display: none">
			<div type="notify-head" class="{{type}}"> 
				<div type="notify-type"><i class="iconfont {{iconType}}"></i></div>
				<div type="notify-content">
				     <a target="_blank" {{link}} type="notify-link" data-code="{{code}}">{{name}}</a>
				</div>
				<div type="notify-btn">
				    <i class="iconfont {{close}}" type="notice-close" data-code="{{code}}"></i>
				</div>
			</div>
		</div>`;

export default class xNotify {
    // 配置
    vCfg ;
    vIcon;
    //需要通知列表
    vNotice=[];
    //显示的通知
    vShow = [];

    constructor(cfg) {
        this.vCfg = cfg;
        this.vIcon = cfg.icons||tmplType;
        setInterval(this.notice.bind(this),this.vCfg.noticeInterval?this.vCfg.noticeInterval:2000);
        if(this.vCfg.recieve)
            setInterval(this.recieve.bind(this),this.vCfg.recieveInterval?this.vCfg.recieveInterval:5000);
        $(document).on('click','[type="notice-close"]',this.evClose.bind(this));
    };

    evClose(e){
        let $item;
        let code = e.target.getAttribute("data-code");
        for(let n of this.vShow){
            if (n.find(e.target).length>0) {
                $item = n;
                break;
            }
        }
        if($item)
            this.closeNotice($item,code)
    }

    notice(){
        let n = this.vNotice.pop();
        if(n){
            this.createNotice(n);
        }
    }

    createNotice(item){
        let style = this.vCfg.style ?this.vCfg.style:'notify-style-1';
        let iconType = this.vIcon[item.type];
        let link = item.link?'href="'+item.link+'"':'';
        let noticeHtml = replaceByObj(tmplNoticeItem,{style,iconType,
            link,type:item.type,name:item.name,code:item.code,close:this.vIcon.close});
        let $item =  $(noticeHtml);
        $('body').append($item);
        this.showNotice($item,item.code);
        if(this.vCfg.duration)
            setTimeout(()=>{ this.closeNotice($item,item.code) } ,this.vCfg.duration);
    }

    showNotice($item,code){
        let span = this.vCfg.span||15;
        let nextPosition = this.vCfg.position||30;
        for(let n of this.vShow){
            nextPosition =  nextPosition+n.outerHeight()+span;
        }
        this.vShow.push($item);
        switch (this.vCfg.showType){
            case 'bottom':
                $item.css("bottom",nextPosition+'px');
                break;
            default:
                $item.css("top",nextPosition+'px');
        }
        $item.fadeIn("slow");
        if(this.vCfg.event && this.vCfg.event.OnNotice)
            this.vCfg.event.OnNotice(code);
    }

    moveNotice(){
        //间隔
        let span = this.vCfg.span||15;
        let nextPosition = this.vCfg.position||30;
        for(let n of this.vShow){
            switch (this.vCfg.showType){
                case 'bottom':
                    n.css("bottom",nextPosition+'px');
                    break;
                default:
                    n.css("top",nextPosition+'px');
            }
            nextPosition =  nextPosition+n.outerHeight()+span;
        }
    }

    //关闭
    closeNotice($item,code){
        if(this.vShow.includes($item)){
            this.vShow = this.vShow.filter(n => n!=$item);
            $item.fadeOut("slow",this.moveNotice());
            if(this.vCfg.event && this.vCfg.event.OnClose)
                this.vCfg.event.OnClose(code);

            //3 秒后 删除
            setTimeout(()=>{ $item.remove() } ,3000);
        }
    }
    // 接受 消息数据
    recieve(){
        if(this.vCfg.recieve)
            this.vCfg.recieve().then(data =>{
                this.setNotice(data.data);
            })
    }

    addNotice(item){
        //新接受的数据，和还没通知的整合
        this.vNotice = this.vNotice.concat(item);
        //根据时间排序
        this.vNotice.sort((a,b)=> a.theTime>b.theTime?-1:0);
    }

}

